<template>
  <div class="container">
    <Navbar />
    <main class="main-content">
      <div class="title">麟芯测试云平台</div>
      <p class="subtitle">整合API, Ui, MIX, STRESS四种测试行引擎（v2版本将开发app自动化）</p>
      <div class="usage-guide">
        <p>使用指南→</p>
      </div>
      <div class="features">
        <div class="feature" v-for="item in data" :key="item.title">
          <h2>{{ item.title }}</h2>
          <p>{{ item.info }}</p>
        </div>
      </div>
    </main>
    <myFooter style="margin-top: 5rem;"/>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import myFooter from '@/components/Footer/index.vue'

const data = [
  {
    title: 'API自动化',
    info: '对一切接口进行测试，可进行代理，支持cRUL直接导入'
  },
  {
    title: 'UI自动化',
    info: '模拟人为操作，大幅降低测试人员工作量，内含多种类型的操作，可提供更多的选择'
  },
  {
    title: 'MIX自动化',
    info: '混合自动化完美融合了API与UI自动化，很好的解决了单一引擎无法完成的测试用例'
  },
  {
    title: 'APP自动化',
    info: 'APP自动化实现Andorid和IOS两种系统的自动化操作。'
  },
  {
    title: '压力测试',
    info: '采用JMETER内核实现，可很好的兼容JMETER，测试人员可以自行创建压测参数，亦可直接导入JMETER配置文件'
  },
]

</script>

<style scoped>
.container {
  .main-content {
    margin-top: 3.6rem;
    color: #fff;
    min-height: 450px;
    background: url("@/assets/images/img/bg.jpg") center center / cover no-repeat;
    overflow: hidden;
    .title {
      font-size: 3.2rem;
      text-align: center;
      font-weight: bold;
      padding: 3rem 0 2rem;
    }
    .subtitle {
      font-size: 1.1rem;
      line-height: 1.3;
      opacity: 0.9;
      text-align: center;
    }
    .usage-guide {
      text-align: center;
      margin-top: 1.5rem;
      p {
        display: inline-block;
        font-size: 1.2rem;
        background-color: #11a8cd;
        padding: .8rem 1.6rem;
        border-radius: 4px;
        transition: background-color .1s ease;
        box-sizing: border-box;
        border-bottom: 1px solid #0f97b9;
        color: #fff;
        cursor: pointer;
        &:hover {
          background-color: #13bee8;
        }
      }
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: stretch;
      justify-content: space-between;
      max-width: 1110px;
      margin: 5rem auto 2rem;
      .feature {
        flex-grow: 1;
        flex-basis: 30%;
        max-width: 30%;
        text-align: center;
        cursor: pointer;
        &:hover {
          color: #11a8cd;
        }
        h2 {
          font-weight: 500;
          font-size: 1.3rem;
          border-bottom: none;
          padding-bottom: 0;
          margin: 1rem 0;
        }
        p {
          opacity: .8;
          padding: 0 .8rem;
          font-size: 1rem;
          margin: 1rem 0;
          line-height: 1.7;
        }
      }
    }
  }
}


</style>